<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/assets/skins/sam/skin.css">
<!-- Combo-handled YUI CSS files: --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/tabview/assets/skins/sam/tabview.css"> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/datatable/assets/skins/sam/datatable.css"> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/button/assets/skins/sam/button.css"> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/dialog/assets/skins/sam/dialog.css"> 

<!-- Combo-handled YUI JS files: --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/element/element-min.js&2.7.0/build/tabview/tabview-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/connection/connection-min.js&2.7.0/build/datasource/datasource-min.js&2.7.0/build/element/element-min.js&2.7.0/build/datatable/datatable-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container-min.js"></script> 


<script type="text/javascript"> 
    var apiTabs = new YAHOO.widget.TabView("apis"); 
	var addDialog;
	var atlasDoc;
	var tabIndex = 0;
	var table;
	var rowIndex = 0;
	
	function handleCancel() {
		addDialog.cancel();
	}

	function handleAdd() {
		var addForm = document.getElementById("addForm");
		var inputs = addForm.getElementsByTagName("input");
		var name = "";
		for (var i=0; i<inputs.length; i++) {
			if (inputs[i].getAttribute("name") == "name") {
				name = inputs[i].value;
			}
		}
		addForm.setAttribute("action", addForm.getAttribute("action")+name);
		addDialog.submit();
	}

	var addFinished = function(o) {
		var e = new Object();
		e.newValue = tabIndex;
		loadTab(e);
	}

	function addItem(e) {
		var apis = atlasDoc.getElementsByTagName("api");
		var pattern = apis[tabIndex].getElementsByTagName("href")[0].firstChild.data;
		var addForm = document.getElementById("addForm");
		addForm.setAttribute("action", "api/"+pattern);
		var addTable = document.getElementById("addTable");
		var props = apis[tabIndex].getElementsByTagName("property");
		addTable.innerHTML = "";
		for (var i=0; i<props.length; i++) {
			var name = props[i].firstChild.data;
			if (name != 'id') {
				if (props[i].type == "List") {
					// fetch the "ofType" values and populate a list
				}
				else {
					addTable.innerHTML += "<tr><td><label>"+name+"</label></td><td><input type=\"text\" name=\""+name+"\"/></td></tr>";
				}
			}
		}
		var addButtons = [ {text:"Add", handler:handleAdd, isDefault:true},
							{text:"Cancel", handler:handleCancel} ];
		addDialog.cfg.queueProperty("buttons", addButtons);
		addDialog.callback.success = addFinished;
		addDialog.render();
		addDialog.show();
	}

	function delItem(e) {
		var row = table.getSelectedTrEls()[0];
		// find index of "id" field
		var tbl = row.parentNode;
		var hdr = tbl.parentNode.childNodes[1].childNodes[0];
		var id = 0;
		for (var i=0; i<hdr.childNodes.length; i++) {
			if (hdr.childNodes[i].firstChild.firstChild.innerHTML == "id") {
				id = i;
				break;
			}
		}
		var idToDel = row.childNodes[id].firstChild.innerHTML;
		alert("id to delete is "+idToDel);
		var apis = atlasDoc.getElementsByTagName("api");
		var pattern = apis[tabIndex].getElementsByTagName("href")[0].firstChild.data;
		var resource = "api/"+pattern+idToDel;
		alert("going to send DELETE to "+resource);
		var deleteConn = YAHOO.util.Connect.asyncRequest("DELETE", resource, reloadCurrentTab);
	}

	var createTable = {
		success: function(o) {
			var xmlDoc = o.responseXML;
			// get field names to make column defs
//			alert(xmlDoc.firstChild.tagName);	// bloglist
//			alert(xmlDoc.firstChild.firstChild.tagName);	// blog
			var fields = new Array();
			if (xmlDoc.firstChild.firstChild != undefined) {
				var child = xmlDoc.firstChild.firstChild.firstChild;
				for (var i=0; child != undefined; i++) {
					fields[i] = new Object();
					fields[i].key = child.tagName;
					if (child.tagName != "id") {
						fields[i].editor = new YAHOO.widget.TextboxCellEditor({disableBtns:true});
					}
					child = child.nextSibling;
				}
				var datasource = new YAHOO.util.LocalDataSource(xmlDoc);
				datasource.responseType = YAHOO.util.DataSource.TYPE_XML;
				datasource.responseSchema = new Object();
				var apis = atlasDoc.getElementsByTagName("api");
				var name = apis[tabIndex].getAttribute("name");
//				alert("data name : "+name);
				datasource.responseSchema.resultNode = name;
				datasource.responseSchema.fields = fields;
				table = new YAHOO.widget.DataTable("grid_"+tabIndex,
							fields, datasource,	{
								selectionMode:"single"
							}); 
				table.subscribe("rowMouseoverEvent", table.onEventHighlightRow); 
				table.subscribe("rowMouseoutEvent", table.onEventUnhighlightRow); 
				table.subscribe("rowClickEvent", table.onEventSelectRow); 
//				table.subscribe("cellClickEvent", table.onEventShowCellEditor); 
				// Programmatically select the first row 
				table.selectRow(table.getTrEl(0)); 
				rowIndex = 0;
			}
			// add in action buttons
			var toolsDiv = document.getElementById("tool_bar_"+tabIndex);
			if (toolsDiv.firstChild == undefined) {
				var addButton = new YAHOO.widget.Button({
									id: "add_"+tabIndex,
									type: "push",
									label: "Add",
									container: "tool_bar_"+tabIndex});
				addButton.on("click", addItem);
				var updateButton = new YAHOO.widget.Button({
									id: "update_"+tabIndex,
									type: "push",
									label: "Update",
									container: "tool_bar_"+tabIndex});
				var delButton = new YAHOO.widget.Button({
									id: "del_"+tabIndex,
									type: "push",
									label: "Delete",
									container: "tool_bar_"+tabIndex});
				delButton.on("click", delItem);
			}

		},
		failure: function(o) {
			alert("Error fetching data");
		},
		cache: false
	}

	var reloadCurrentTab = {
		success: function(o) {
			var e = new Object();
			e.newValue = tabIndex;
			loadTab(e);
		},
		failure: function(o) {
			alert("Error fetching data");
		},
		cache: false
	}

//	function reloadCurrentTab() {
//		var e = new Object();
//		e.newValue = tabIndex;
//		loadTab(e);
//	}

	function loadTab(e) {
		tabIndex = e.newValue;
		var tabDiv = document.getElementById("grid_"+tabIndex);
		tabDiv.innerHTML="No Data";
		
		var apis = atlasDoc.getElementsByTagName("api");
		var pattern = apis[tabIndex].getElementsByTagName("href")[0].firstChild.data;
		var dataXML = YAHOO.util.Connect.asyncRequest("GET", "api/"+pattern, createTable);
	}

	var createTabs = {
		success: function(o) {
			atlasDoc = o.responseXML;
			var userLabel = document.getElementById("username");
			userLabel.innerHTML = "user : "+atlasDoc.getElementsByTagName("user")[0].firstChild.data+"<br/>";

			var apis = atlasDoc.getElementsByTagName("api");
			var first = true;
			for (var i=0; i<apis.length; i++) {
				var name = apis[i].getAttribute("name");
//				var pattern = apis[i].getElementsByTagName("href")[0].firstChild.data;
//				var url = "testTable.html?name="+name+"&pattern="+pattern;
				var tab = new YAHOO.widget.Tab({ 
					label: name,
					content: "<div id=\"tool_bar_"+i+"\"></div><div id=\"grid_"+i+"\" class=\"yui-navset\">loading...</div>",
					//dataSrc: url,
					//loadMethod: "GET",
					active: first
				});
				apiTabs.addTab(tab);
				first = false;
			}
    		apiTabs.appendTo(document.body); 
			apiTabs.addListener("activeIndexChange", loadTab);
			loadTab({newValue:0});
		},
		failure: function(o) {
			alert("Error fetching atlas");
		},
		cache: false
	}

	function loadAtlas() {
		var atlasXML = YAHOO.util.Connect.asyncRequest("GET", "api", createTabs);
		// also setup dialog, to improve view
		addDialog = new YAHOO.widget.Dialog("addDialog");
	}

</script>
 
</head>
<body class="yui-skin-sam" onload="loadAtlas();">
<div id="username"> 
</div>
<div id="apis" class="yui-navset"> 
    <ul class="yui-nav"> 
    </ul>             
    <div class="yui-content"> 
    </div> 
</div> 
<div id="addDialog" style="visibility:hidden">
	<div class="hd">Add</div>
	<div class="bd">
		<form id="addForm" method="POST" action="">
			<table>
				<tbody id="addTable"/>
			</table>
		</form>
	</div>
</div>
</body>
</html>
